<!--&lt;!&ndash;<template>&ndash;&gt;-->
<!--&lt;!&ndash;  <div class="box">&ndash;&gt;-->
<!--&lt;!&ndash;    &lt;!&ndash; 地图组件 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;    <el-amap&ndash;&gt;-->
<!--&lt;!&ndash;        vid="amapContainer"&ndash;&gt;-->
<!--&lt;!&ndash;        :zoom="zoom"&ndash;&gt;-->
<!--&lt;!&ndash;        :events="events"&ndash;&gt;-->
<!--&lt;!&ndash;        class="amapClass"&ndash;&gt;-->
<!--&lt;!&ndash;    ></el-amap>&ndash;&gt;-->
<!--&lt;!&ndash;  </div>&ndash;&gt;-->
<!--&lt;!&ndash;</template>&ndash;&gt;-->

<!--&lt;!&ndash;<script>&ndash;&gt;-->
<!--&lt;!&ndash;// 引入地图加载实例方法&ndash;&gt;-->
<!--&lt;!&ndash;import { lazyAMapApiLoaderInstance } from "vue-amap";&ndash;&gt;-->
<!--&lt;!&ndash;export default {&ndash;&gt;-->
<!--&lt;!&ndash;  name: "gaode_ditu_amap",&ndash;&gt;-->
<!--&lt;!&ndash;  data() {&ndash;&gt;-->
<!--&lt;!&ndash;    return {&ndash;&gt;-->
<!--&lt;!&ndash;      map: null, // 地图实例存储变量&ndash;&gt;-->
<!--&lt;!&ndash;      zoom: 16.6, // 地图缩放比例。zoom值越小，越宏观、越大，越微观。大家可以更改zoom值看看效果&ndash;&gt;-->
<!--&lt;!&ndash;      events: {}, // 地图事件&ndash;&gt;-->
<!--&lt;!&ndash;      // 下方为上海虹桥火车站的经纬度坐标，我从网上搜索，大家可以更改这个坐标看看效果&ndash;&gt;-->
<!--&lt;!&ndash;      x: 116.2017,&ndash;&gt;-->
<!--&lt;!&ndash;      y: 40.15,&ndash;&gt;-->
<!--&lt;!&ndash;    };&ndash;&gt;-->
<!--&lt;!&ndash;  },&ndash;&gt;-->
<!--&lt;!&ndash;  created() {&ndash;&gt;-->
<!--&lt;!&ndash;      this.getLocation()&ndash;&gt;-->
<!--&lt;!&ndash;  },&ndash;&gt;-->
<!--&lt;!&ndash;  methods: {&ndash;&gt;-->
<!--&lt;!&ndash;    getLocation() {&ndash;&gt;-->
<!--&lt;!&ndash;      if (navigator.geolocation) {&ndash;&gt;-->
<!--&lt;!&ndash;        navigator.geolocation.getCurrentPosition(&ndash;&gt;-->
<!--&lt;!&ndash;            position => {&ndash;&gt;-->
<!--&lt;!&ndash;              this.x = position.coords.latitude;&ndash;&gt;-->
<!--&lt;!&ndash;              this.y = position.coords.longitude;&ndash;&gt;-->
<!--&lt;!&ndash;            },&ndash;&gt;-->
<!--&lt;!&ndash;            error => {&ndash;&gt;-->
<!--&lt;!&ndash;              console.error('Error getting location:', error);&ndash;&gt;-->
<!--&lt;!&ndash;            }&ndash;&gt;-->
<!--&lt;!&ndash;        );&ndash;&gt;-->
<!--&lt;!&ndash;      } else {&ndash;&gt;-->
<!--&lt;!&ndash;        console.error("Geolocation is not supported by this browser.");&ndash;&gt;-->
<!--&lt;!&ndash;      }&ndash;&gt;-->
<!--&lt;!&ndash;    }&ndash;&gt;-->
<!--&lt;!&ndash;  },&ndash;&gt;-->
<!--&lt;!&ndash;  mounted() {&ndash;&gt;-->
<!--&lt;!&ndash;    // 插件加载成功以后去绘制地图&ndash;&gt;-->
<!--&lt;!&ndash;    lazyAMapApiLoaderInstance.load().then(() => {&ndash;&gt;-->
<!--&lt;!&ndash;      // 指定地图容器，并做相应的配置&ndash;&gt;-->
<!--&lt;!&ndash;      this.map = new AMap.Map("amapContainer", {&ndash;&gt;-->
<!--&lt;!&ndash;        center: new AMap.LngLat(this.x, this.y), // 地图中心点的经纬度位置配置&ndash;&gt;-->
<!--&lt;!&ndash;        zoom: this.zoom, // 地图缩放比例配置&ndash;&gt;-->
<!--&lt;!&ndash;      });&ndash;&gt;-->
<!--&lt;!&ndash;      // 标记的配置&ndash;&gt;-->
<!--&lt;!&ndash;      var marker = new AMap.Marker({&ndash;&gt;-->
<!--&lt;!&ndash;        map: this.map, // 使用此地图实例&ndash;&gt;-->
<!--&lt;!&ndash;        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", // 标记定位的小图标&ndash;&gt;-->
<!--&lt;!&ndash;        position: [this.x, this.y], // 标记定位的小图标经纬度位置（一般标记定位的位置和地图中心点的位置要保持一致）&ndash;&gt;-->
<!--&lt;!&ndash;      });&ndash;&gt;-->
<!--&lt;!&ndash;      // 使用相关配置&ndash;&gt;-->
<!--&lt;!&ndash;      marker.setMap(this.map);&ndash;&gt;-->
<!--&lt;!&ndash;    });&ndash;&gt;-->
<!--&lt;!&ndash;  },&ndash;&gt;-->
<!--&lt;!&ndash;};&ndash;&gt;-->
<!--&lt;!&ndash;</script>&ndash;&gt;-->
<!--&lt;!&ndash;<style scoped>&ndash;&gt;-->
<!--&lt;!&ndash;.box {&ndash;&gt;-->
<!--&lt;!&ndash;  width: 100%;&ndash;&gt;-->
<!--&lt;!&ndash;  height: 100%;&ndash;&gt;-->
<!--&lt;!&ndash;  box-sizing: border-box;&ndash;&gt;-->
<!--&lt;!&ndash;  padding: 10px;&ndash;&gt;-->
<!--&lt;!&ndash;  background-color: #ced;&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->
<!--&lt;!&ndash;/* 指定地图的宽高 */&ndash;&gt;-->
<!--&lt;!&ndash;.amapClass {&ndash;&gt;-->
<!--&lt;!&ndash;  width: 380px;&ndash;&gt;-->
<!--&lt;!&ndash;  height:600px;&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->
<!--&lt;!&ndash;</style>&ndash;&gt;-->


<!--<template>-->
<!--  <div>-->
<!--    <div class="mapSearch">-->
<!--      <input placeholder="请输入你要查找的关键词" v-model="userInput" id="tishikuang"></input>-->
<!--      <button type="primary" @click="biu">确定选址</button>-->
<!--    </div>-->
<!--    <div id="container">-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import AMapLoader from '@amap/amap-jsapi-loader'-->
<!--window._AMapSecurityConfig = {-->
<!--  securityJsCode: 'c5f828b7b03e894cab70efbe88155b4b'//在这里填写你的安全密钥-->
<!--}-->
<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      map: null,-->
<!--      autoOptions: {-->
<!--        input: 'tishikuang' //绑定的搜索关键字的input标签ID，用这个注册-->
<!--      },-->
<!--      auto: null,-->
<!--      userInput: '', //绑定的搜索关键字的的内容-->
<!--      placeSearch: null,-->
<!--      searchHere: null, //根据搜索组件搜索到以后的地点信息-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    this.initMap()-->
<!--  },-->
<!--  methods: {-->

<!--    // poi搜索以后 点击确认选址以后的操作-->
<!--    biu() {-->
<!--      if (this.searchHere) {-->
<!--        this.$message({-->
<!--          message: '确认地点：'+this.searchHere.name,-->
<!--          type: 'success'-->
<!--        });-->
<!--        // this.$emit('mapHere',this.searchHere);-->

<!--        alert(`地址数据都在data里面this.searchHere，包括经纬度，以及其他各种地址信息，该有的都有，当poi搜索以后select(e){}方法里面的参数e就是地址信息，我把单独拿出来。地点名：`+this.searchHere.name)-->
<!--      }-->
<!--    },-->
<!--    initMap() {-->
<!--      AMapLoader.load({-->
<!--        key: "cc330a37bd976b63edb892609bcd4584", // 申请好的Web端开发者Key，首次调用 load 时必填-->
<!--        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15-->
<!--        plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType',-->
<!--          'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder'-->
<!--        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等-->
<!--      }).then((AMap) => {-->
<!--        this.map = new AMap.Map("container", { //设置地图容器id-->
<!--          viewMode: "3D", //是否为3D地图模式-->
<!--          zoom: 17, //初始化地图级别-->
<!--          center: [105.602725, 37.076636], //初始化地图中心点位置-->
<!--        });-->
<!--        //引入高德地图的空间绑定使用-->
<!--        this.map.addControl(new AMap.Scale())-->
<!--        this.map.addControl(new AMap.ToolBar())-->
<!--        this.map.addControl(new AMap.HawkEye())-->
<!--        this.map.addControl(new AMap.MapType())-->
<!--        this.map.addControl(new AMap.Geolocation())-->
<!--        this.auto = new AMap.AutoComplete(this.autoOptions)-->
<!--        //-->
<!--        this.placeSearch = new AMap.PlaceSearch({-->
<!--          map: this.map-->
<!--        }) //构造地点查询类-->
<!--        this.auto.on('select', this.select)//绑定查询事件-->

<!--      }).catch(e => {-->
<!--        console.log(e);-->
<!--      })-->
<!--    },-->

<!--    //poi搜索 这里面的这个参数 e 就是搜索以后的地址信息 你可以把它打印出来看一看经纬度什么的都有-->
<!--    select(e) {-->
<!--      this.placeSearch.setCity(e.poi.adcode) //依据城市ID搜索-->
<!--      this.placeSearch.search(e.poi.name) //关键字查询查询-->
<!--      this.map.setZoom(10,true)-->
<!--      this.searchHere = e.poi-->
<!--      this.$message({-->
<!--        message: '选择地点:' + this.searchHere.name,-->
<!--        type: 'success'-->
<!--      });-->
<!--    }-->
<!--  },-->

<!--}-->
<!--</script>-->

<!--<style lang="less" scoped>-->
<!--#container {-->
<!--  padding: 0px;-->
<!--  margin: 0px;-->
<!--  width: 100%;-->
<!--  height: 500px;-->
<!--}-->

<!--.mapSearch {-->
<!--  display: flex;-->
<!--  margin-bottom: 8px;-->

<!--  .el-button {-->
<!--    margin-left: 8px;-->
<!--  }-->
<!--}-->

<!--#tishikuang {-->
<!--  margin-bottom: 200px;-->
<!--  display: block;-->
<!--}-->
<!--</style>-->

ca0a2c509c8671c06ea18eda7c4a7935.EZVbgjUKDqDP6dli
4dc1e622e4e595c5708a28eb5abdc791.MZn5GqZmFIzGLxTG
